<template>
  <div>
    <div class="gui-padding bgf">
      <div class="mb15">
        <a-breadcrumb>
          <a-breadcrumb-item>{{t("model.ProductManager")}}</a-breadcrumb-item>
          <a-breadcrumb-item>{{t("model.ProductList")}}</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <div class="mb10 flex align-items justify-content-between">
        <div>
          <span class="mr5"><a-button type="primary" size="small" :loading="addLoading" @click="handleOpenAdd"> <template #icon><PlusOutlined/> </template>{{t("button.Add")}}</a-button></span>
          <span class="mr5" v-if="false"><a-button type="primary" size="small" :disabled="state.selectedRowKeys.length == 0"> <template
              #icon><CheckOutlined/> </template>批量通过</a-button></span>
          <span class="mr5" v-if="false"><a-button type="primary" size="small" :disabled="state.selectedRowKeys.length == 0"
                                      class="mainbg2"> <template #icon><ArrowUpOutlined/> </template>批量上架</a-button></span>
          <span class="mr5" v-if="false"><a-button type="primary" size="small" :disabled="state.selectedRowKeys.length == 0"
                                      class="mainbg2"> <template #icon><ArrowDownOutlined/> </template>批量下架</a-button></span>
          <span class="mr5" v-if="false"><a-button type="primary" size="small" :disabled="state.selectedRowKeys.length == 0" danger> <template
              #icon><CloseOutlined/> </template>批量删除</a-button></span>
        </div>

        <a-form layout="inline" autocomplete="off">
          <a-form-item label="关键词">
            <a-input v-model:value.trim="queryParams.keyword" size="small" style="width: 160px" @change="handleSearch" placeholder="请输入关键词" allow-clear/>
          </a-form-item>
          <a-form-item label="状态">
            <a-select
                ref="select"
                size="small"
                placeholder="请选择"
                allow-clear
                @change="handleSearch"
                v-model:value="queryParams.status"
                style="width: 120px"
            >
              <a-select-option :value="1">发布</a-select-option>
              <a-select-option :value="0">未发布</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" size="small" @click="handleSearch">
              <SearchOutlined/>
              {{t("button.Search")}}
            </a-button>
          </a-form-item>
        </a-form>
      </div>
      <a-table :columns="columns"
               rowClassName="items"
               :loading="tableLoading"
               rowKey="id"
               :scroll="{ x: 'calc(100vw - 326px)', y: 'calc(100vh - 255px)' }"
               :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
               :pagination="false"
               :data-source="tableData"
               size="middle" sticky bordered>
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.dataIndex === 'mainImage'">
           <div class="flex align-center"> <a-image
               :height="30"
               :src="record.mainImage"
               fallback="/imgs/1px.png"
           /></div>
          </template>

          <template v-if="column.dataIndex === 'name'">
            <div class="flex align-items">
              <span class="ml10">{{text}}</span></div>
          </template>

          <template v-if="column.dataIndex === 'isNew'">
            <a-switch v-model:checked="record.isNew" @change="handleChangeUpdate(record,'isNew')" :checked-value="1" :un-checked-value="0" checked-children="是"
                      un-checked-children="否"/>
          </template>

          <template v-if="column.dataIndex === 'isHot'">
            <a-switch v-model:checked="record.isHot" @change="handleChangeUpdate(record,'isHot')"  :checked-value="1" :un-checked-value="0" checked-children="是"
                      un-checked-children="否"/>
          </template>

          <template v-if="column.dataIndex === 'status'">
            <a-switch v-model:checked="record.status" @change="handleChangeUpdate(record,'status')" :checked-value="1" :un-checked-value="0" checked-children="发布中"
                      un-checked-children="未发布"/>
          </template>
          <template v-if="column.dataIndex === 'recommendedByMerchants'">
            <a-switch v-model:checked="record.recommendedByMerchants" @change="handleChangeUpdate(record,'recommendedByMerchants')" :checked-value="1" :un-checked-value="0" checked-children="是"
                      un-checked-children="否"/>
          </template>
          <template v-if="column.dataIndex === 'recommendedByMember'">
            <a-switch v-model:checked="record.recommendedByMember" @change="handleChangeUpdate(record,'recommendedByMember')" :checked-value="1" :un-checked-value="0" checked-children="是"
                      un-checked-children="否"/>
          </template>
          <template v-if="column.dataIndex === 'operation'">
            <div class="editable-row-operations">
              <span class="mr5">
               <a-button type="primary" @click="handleEdit(record.id)" size="small"> <template #icon><EditOutlined style="font-size:12px"/></template>{{t('button.Edit')}}</a-button>
              </span>
              <span class="mr5">
              <a-popconfirm title="你确定设置秒杀商品吗?" @confirm="handleSeckillGoods(record.id)">
               <a-button type="primary" size="small"> <template #icon><SettingOutlined
                   style="font-size:12px"/></template>设置秒杀商品</a-button>
              </a-popconfirm>
              </span>
              <span>
              <a-popconfirm title="你确定删除吗?" @confirm="handleDelete(record.id)">
               <a-button type="primary" size="small" danger> <template #icon><CloseOutlined
                   style="font-size:12px"/></template>{{t('button.Delete')}}</a-button>
              </a-popconfirm>
            </span>
            </div>
          </template>
        </template>
      </a-table>
      <div class="flex  mt20">
        <a-pagination
            v-model:current="queryParams.pageNo"
            v-model:page-size="queryParams.pageSize"
            @change="handleChangePageNo"
            :page-size-options="pageSizeOptions"
            show-size-changer
            :total="total"/>
      </div>
      <goods-add ref="addRef" @success="handleLoadData"></goods-add>
    </div>
  </div>
</template>
<script lang="ts" setup>
const { t } = useI18n()
const tableData = ref([]);
const total = ref(0)
const pages = ref(0)
const tableLoading = ref(true)
const addLoading = ref(false)
const addRef = ref({})
const pageSizeOptions = ref<string[]>(['10', '20', '30', '40', '50']);
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  sortColumns:'',
  status:null,
  keyword:''
})

const state = reactive({
  selectedRowKeys: [],
  loading: false,
})


const columns = [
  {
    title: '序号',
    fixed: "left",
    align:"center",
    width:60,
    dataIndex: 'index',
    customRender: ({text, record, index}) =>  index + 1
  },
  {
    fixed: "left",
    title: '商品编号',
    align:'center',
    dataIndex: 'id',
    width: 100,
  },
  {
    fixed: "left",
    title: '商品主图',
    align:'center',
    dataIndex: 'mainImage',
    width: 100,
  },
  {
    fixed: "left",
    title: '标题',
    dataIndex: 'name',
    width: 400,
  },
  {
    title: '店铺名称',
    align:"center",
    dataIndex: 'shopsName',
    width: 100,
  },
  {
    title: '原价',
    dataIndex: 'originalPrice',
    align: 'center',
    width: 100,
    customRender: ({text, record, index}) =>  '￥'+text
  },
  {
    title: '包装费',
    dataIndex: 'packingCharges',
    align: 'center',
    width: 100,
    customRender: ({text, record, index}) =>  (text?text:0)+"元"
  },
  {
    title: '一口价',
    dataIndex: 'price',
    align: 'center',
    width: 100,
    customRender: ({text, record, index}) =>  '￥'+text
  },
  {
    title: '商品库存',
    dataIndex: 'stock',
    align: 'center',
    width: 100,
  },
  {
    title: '是否热门',
    align: 'center',
    dataIndex: 'isHot',
    width: 100,
  },
  {
    title: '是否新品',
    align: 'center',
    dataIndex: 'isNew',
    width: 100,
  },
  {
    title: '状态',
    align: 'center',
    dataIndex: 'status',
    width: 100,
  },
  {
    title: '总销量',
    align: 'center',
    dataIndex: 'totalSales',
    width: 100,
  },
  {
    title: '是否商家推荐菜',
    align: 'center',
    dataIndex: 'recommendedByMerchants',
    width: 140
  },
  {
    title: '是否用户推荐菜',
    align: 'center',
    dataIndex: 'recommendedByMember',
    width: 140
  },
  {
    title: '用户推荐菜认数',
    align: 'center',
    dataIndex: 'numberOfRecommendedMember',
    width: 140
  },
  {
    title: '创建时间',
    align: 'center',
    dataIndex: 'createTime',
    width: 180,
  },
  {
    title: '更新时间',
    align: 'center',
    dataIndex: 'updateTime',
    width: 180,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    align: "center",
    fixed: "right",
    width: 280,
  },
];

// 查询表格信息
const handleLoadData = async ()=>{
  tableLoading.value = true
  const res= await useLoadGoodsList(queryParams)
  tableData.value = res.data.records
  total.value = res.data.total
  pages.value = res.data.pages
  tableLoading.value = false
}

// 改变分页查询
const handleChangePageNo = (pno, psize) => {
  queryParams.pageNo = pno;
  queryParams.pageSize = psize;
  handleLoadData()
}

// 搜索
const handleSearch = ()=>{
  queryParams.pageNo = 1
  handleLoadData()
}

// 选择行
const onSelectChange = (selectedRowKeys) => {
  console.log('selectedRowKeys changed: ', selectedRowKeys);
  state.selectedRowKeys = selectedRowKeys;
};


const handleChangeUpdate = async(record,field)=>{
  var params = {
    id:record.id,
    field:field,
    value:record[field]
  }
  await useUpdateStatusGoods(params)
  useMessage().success("操作成功!")
}

// 添加商品
const handleOpenAdd = ()=>{
  addLoading.value = true
  addRef.value.handleOpen()
  addLoading.value = false
}

// 设置秒杀商品
const handleSeckillGoods = async (id)=>{
  try {
    await useToSeckillGoods(id)
    useMessage().success("设置成功!");
  }catch (e) {
    useMessage().error(e.msg);
  }
}

// 编辑
const handleEdit = (id) => {
  addLoading.value = true
  addRef.value.handleOpen(id)
  addLoading.value = false
}

// 删除
const handleDelete = async (id) => {
  const res= await useDeleteGoods(id)
  useMessage().success("删除成功!");
  handleLoadData()
}

definePageMeta({
  pageTransition: {
    name: 'rotate',
    mode: 'out-in' // 默认值
  }
})

onMounted(()=>{
  handleLoadData()
})

</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
</style>
